<template>
  <!-- 111110-新增、111120-修改、111130-删除、111140-批量删除	
 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
    >
      <!-- <el-form-item label="培训部门" prop="deptId">
        <treeselect
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择部门"
          style="width: 240px"
          size="small"
        />
      </el-form-item> -->
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入班组名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="4" :xs="24">
        <!-- <div class="head-container">
          <el-input
            v-model="treeName"
            placeholder="请输入分类名称"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div> -->
        <div class="head-container">
          <el-tree
            :data="treeOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="defaultExpandkeys"
            accordion
            class="tree-container"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['111110']"
              @click="handleAdd"
              >设置班组</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="tableList" :border="true">
          <el-table-column label="班组名称" prop="title" align="center">
            <template slot-scope="scope">
              <span @click="handleSee(scope.row)" class="active">{{
                scope.row.title
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="培训部门"
            prop="department"
            align="center"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="工种"
            prop="department"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="岗位"
            prop="department"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部门"
            prop="department"
            align="center"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column
            label="班组人数"
            prop="personnelNum"
            align="center"
            :show-overflow-tooltip="true"
            width="80"
          />
          <el-table-column label="归档" align="center" key="enable">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="添加日期"
            prop="releaseTime"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="发布人"
            prop="publisher"
            align="center"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.enable === 0">
                <el-button
                  size="mini"
                  type="text"
                  v-hasPermi="['111120']"
                  @click="handleUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  v-hasPermi="['111130']"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :limit.sync="queryParams.pagesize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <!-- *班组名称、*培训部门（树状下拉框） -->
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item label="培训部门" prop="departmentId">
          <treeselect
            v-model="form.departmentId"
            :options="treeOptions"
            :show-count="true"
            placeholder="请选择培训部门"
            @select="selectDepart"
          />
        </el-form-item>
        <el-form-item label="班组名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入班组名称" />
        </el-form-item>
        <!-- <el-form-item label="班组人数" prop="personnelNum">
          <el-input v-model="form.personnelNum" placeholder="请输入班组人数" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 班组人员 — 弹框 -->
    <el-dialog
      title="班组人员"
      :visible.sync="open2"
      width="800px"
      append-to-body
    >
      <el-form
        :model="queryParams2"
        ref="queryForm2"
        v-show="showSearch2"
        :inline="true"
      >
        <!-- <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams2.keywords"
            placeholder="请输入手机号/姓名"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery2"
          />
        </el-form-item> 
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery2"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery2"
            >重置</el-button
          >
        </el-form-item>-->
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addPeople(1)"
            >添加人员</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete2"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            >导入名单</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出名单</el-button
          >
        </el-col>
      </el-row>

      <!-- 人员ID、姓名、部门、手机号、读取状态（未读/已读） -->
      <!-- v-loading="loading2" -->
      <el-table
        :data="tableList2"
        :border="true"
        @selection-change="handleSelectionChange"
        max-height="600px"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="姓名"
          prop="fullName"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="手机号"
          prop="phone"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="department"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="工种"
          prop="workType"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="岗位"
          prop="post"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="100"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDelete2(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="queryParamsPer.currentPage"
        :limit.sync="queryParamsPer.pagesize"
      />
      <!-- @pagination="getListPer" -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="preservation">保存</el-button>
        <!-- <el-button @click="cancel">返回</el-button> -->
      </div>
    </el-dialog>

    <!-- 添加人员 -->
    <el-dialog
      :title="titleAddPeople"
      class="add-person"
      :visible.sync="openAddPeople"
      width="1000px"
      append-to-body
    >
      <el-row :gutter="20">
        <el-col :span="7" :xs="24">
          <el-tabs v-model="curTabs" type="card" @tab-click="handleClick">
            <el-tab-pane label="部门" name="deptId">
              <div class="head-container">
                <!-- value-consists-of="ALL_WITH_INDETERMINATE" -->
                <treeselect
                  v-model="currValue1"
                  :multiple="true"
                  :options="deptOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="工种" name="workType">
              <div class="head-container">
                <treeselect
                  v-model="currValue2"
                  :multiple="true"
                  :options="workOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="岗位" name="postId">
              <div class="head-container">
                <treeselect
                  v-model="currValue3"
                  :multiple="true"
                  :options="postOptions"
                  :show-count="true"
                  :alwaysOpen="true"
                  :minHeight="250"
                  :limit="5"
                  :defaultExpandLevel="Infinity"
                  placeholder="请选择"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="16" :xs="24">
          <el-table
            :data="tableListPer"
            @selection-change="handleSelectionChangePer"
            :border="true"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="姓名"
              prop="fullName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="手机号"
              prop="phone"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="部门" prop="department" align="center" />
            <el-table-column label="工种" prop="workType" align="center" />
            <el-table-column label="岗位" prop="post" align="center" />
          </el-table>

          <pagination
            v-show="totalPer > 0"
            :total="totalPer"
            :page.sync="queryParams2.currentPage"
            :limit.sync="queryParams2.pagesize"
            @pagination="getPersonList"
          />
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddPeople">确定</el-button>
        <el-button @click="cancelAddPeople">取消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据 -->
          <el-link type="info" style="font-size: 12px" @click="importTemplate"
            >下载模板</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadImage from "@/components/ImageUpload";

import { listData as personListData } from "@/api/system/personAdmin";

import {
  listData,
  getData,
  delData,
  addData,
  updateData,
  delMultiData,
  getSelect,
  getEnable,
  getPersonnelList,
  getPage,
  updateTeam,
} from "@/api/system/teamSet";
import { getInstitutions, getDepartment, getDict } from "@/api/select";

export default {
  name: "teamSet",
  data() {
    return {
      formAddPeoper: {},
      currentId: null,
      cuttentVal: "",
      curTabsKey: "",
      openAddPeoper: false,
      Personnetheid: "",
      deptOptions: [],
      treeOptions: [],
      defaultExpandkeys: [],
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        theType: 1,
        keywords: undefined,
        departmentId: undefined,
        theid: undefined,
      },
      queryParamsPer: {
        currentPage: 1,
        pagesize: 10,
        theid: undefined,
      },
      showSearch: true,
      loading: true,
      tableList: [],
      total: 0,
      title: "",
      open: false,
      form: {
        title: undefined,
        departmentId: undefined,
      },
      curTabs: "deptId",
      openAddPeople: false, //添加人员弹框
      titleAddPeople: "",
      Teamnametitle: "", // 班组名称
      Teamdepartment: "", // 班组  部门名称
      TeamdepartmentId: "", // 班组 部门id
      currValue1: [], //添加人员 左侧树当前选中节点
      currValue2: [], //添加人员 左侧树当前选中节点
      currValue3: [], //添加人员 左侧树当前选中节点
      currValue4: [], //添加人员 左侧树当前选中节点
      currNoticeId: null,
      totalPer: 0,
      tableListPer: [],
      ids2: [],
      rules: {
        title: [
          { message: "班组名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        departmentId: [
          { required: true, message: "培训部门不能为空", trigger: "blur" },
        ],
      },
      // 班组人员-----------
      open2: false,
      queryParams2: {
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        theid: undefined,
      },
      showSearch2: true,
      loading2: false,
      ids: [],
      single: true,
      multiple: true,
      tableList2: [],
      total2: 0,
      open3: false,
      form3: {
        deptIds: [],
        workId: undefined,
        postId: undefined,
        personId: undefined,
      },
      rules3: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      tabs: ["部门", "工种", "岗位"],
      curTabs: "部门",
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
      postOptions: [], // 岗位
      workOptions: [], // 工种
    };
  },
  components: {
    Treeselect,
    UploadImage,
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    checkNum() {
      //添加人员 选中人数
      return this.ids2.length;
    },
  },
  watch: {
    // 根据名称筛选树
    treeName(val) {
      this.$refs.tree.filter(val);
    },
    currValue1(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.deptId = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
    currValue2(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.workType = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
    currValue3(newVal, oldVal) {
      if (newVal != oldVal) {
        if (newVal.length > 0) {
          this.queryParams2.postId = newVal.join(",");
          this.getPersonList();
        } else {
          this.tableListPer = [];
        }
      }
    },
  },
  created() {
    this.getreeList();
    this.getSelect();
    // this.getList();

    // 获取数据字典
    getDict(11, 0).then((response) => {
      //11-岗位
      this.postOptions = response.result.data;
    });
    getDict(12, 0).then((response) => {
      //12-工种
      this.workOptions = response.result.data;
    });
  },
  methods: {
    getreeList() {
      getPage().then((response) => {
        this.treeOptions = response.result.data;
        console.log("this.treeOptions", this.treeOptions);
        if (this.currentId === null) {
          //首次进入当前页面
          this.currentId = response.result.data[0].id; //将节点id赋值给上级id
          this.cuttentVal = response.result.data[0].label; //将节点label赋值给上级label
        }
        this.$nextTick(() => {
          //默认当前选中（主要是为了样式）
          this.$refs.tree.setCurrentKey(this.currentId, true, false);
        });
        // this.defaultExpandkeys[0] = this.currentId;
        this.getList();
      });
    },
    getList() {
      this.loading = true;
      this.queryParams.departmentId = this.currentId;
      listData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    selectDepart(val) {
      console.log(val);
      this.form.department = val.label;
    },
    resetAddPeoper() {
      // this.tabs = []
      // this.curTabs = ''
      // this.curTabsKey = ''
      this.resetForm("formAddPeoper");
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data);
      this.currentId = data.id; //id
      this.cuttentVal = data.label;
      // this.defaultExpandkeys[0] = this.currentId;   //下一次获取树，默认展开的节点
      this.getList();
    },

    // 添加人员（按钮）
    addPeople(val) {
      this.resetAddPeople();
      this.curTabs = "deptId"; //给tab一个默认值
      this.currDialog = val;
      this.openAddPeople = true;
      if (val === 1) {
        // this.tabs 部门、工种、岗位、指定班组
        // this.titleAddPeople = '添加企业员工人员'
        this.titleAddPeople = "添加人员";
      } else if (val === 2) {
        // this.tabs 工作单位、工种、指定班组
        this.titleAddPeople = "添加外委人员";
      }
    },
    cancelAddPeople() {
      this.openAddPeople = false;
      this.resetAddPeople();
    },
    resetAddPeople() {
      this.tableListPer = [];
      this.ids2 = [];
      this.currValue1 = [];
      this.currValue2 = [];
      this.currValue3 = [];
      this.currValue4 = [];
      this.queryParams2 = {
        currentPage: 1,
        pagesize: 10,
        unitId: undefined,
        deptId: undefined,
        workType: undefined,
        postId: undefined,
        theid: undefined,
      };
    },
    // 获取添加的人员的数据
    getPersonList() {
      if (this.currDialog === 1) {
        //添加企业员工人员
        if (this.queryParams2.theid) {
          //说明现在添加的人员是：班组对应的人员
          getTeamPersonnelList(this.queryParams2).then((response) => {
            console.log("response", response.result);
            this.tableListPer = response.result.rows;
            this.totalPer = response.result.total;
          });
        } else {
          //说明现在添加的人员是：部门、工种、岗位对应的人员
          personListData(this.queryParams2).then((response) => {
            this.tableListPer = response.result.rows;
            this.totalPer = response.result.total;
          });
        }
      } else if (this.currDialog === 2) {
        //添加外委人员
        /* outPersonListData(this.queryParams2).then((response) => {
          // this.tableList2 = response.result.rows;
          // this.totalPer = response.result.total;
        }); */
      }
    },
    // 选择添加的人
    handleSelectionChangePer(selection) {
      this.ids2 = selection;
      console.log(this.ids2);
    },
    // 确定 添加人员
    submitAddPeople() {
      if (this.ids2.length > 0) {
        //选中人数大于0
        let arr = this.tableList2.concat(this.ids2); //将需要添加的人和已添加的人拼接
        this.tableList2 = this.unique(arr); //将拼接好的数据去重
      }
      this.openAddPeople = false;
    },
    // 数组去重
    unique(arr) {
      // 利用对象访问属性的方法，判断对象中是否存在key
      var result = [];
      var obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].theid]) {
          result.push(arr[i]);
          obj[arr[i].theid] = true;
        }
      }
      return result;
    },
    getSelect() {
      getSelect().then((response) => {
        this.deptOptions = response.result.department; //部门
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "设置班组";
    },
    handleUpdate(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.form = response.result;
        this.open = true;
        this.title = "修改";
      });
    },
    submitForm() {
      console.log("this.form", this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.form).then((response) => {
              console.log("----this.form", this.form);
              this.msgSuccess("添加成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        title: undefined,
        departmentId: this.currentId, //培训部门 id
        department: this.cuttentVal, //培训部门
        theType: 1,
        personnelNum: undefined,
        publisher: this.$store.state.userInfo.thename,
        publisherId: this.$store.state.userInfo.theid,
      };
      this.resetForm("form");
    },
    selectTree(val) {
      if (this.deptOptions.length > 0) {
        this.form.department = val.label;
      }
      console.log(this.form.department);
    },
    // 删除
    handleDelete(row) {
      const theId = row.theid || this.ids;
      let idListStr = this.ids.join(",");
      if (row.theid) {
        //删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            // 调接口
            return delData(theId);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
      } else {
        //批量删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return delMultiData(idListStr);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
      }
    },
    handleStatusChange(row) {
      let text = row.enable === 1 ? "启用" : "停用";
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口 改变状态值
          return getEnable(row.theid, row.enable);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.enable = row.enable === 0 ? 1 : 0;
        });
    },
    handleClick(tab) {
      this.resetAddPeople(); //重置值
    },
    // 添加人员
    handlePerson() {
      this.open3 = true;
    },
    submitForm3() {
      this.$refs["form3"].validate((valid) => {
        if (valid) {
          /* addRole(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }); */
          this.msgSuccess("添加成功");
          this.open3 = false;
          this.getList2();
        }
      });
    },
    // 取消按钮
    // cancel3() {
    //   this.open3 = false;
    //   this.reset3();
    // },
    cancelAddPeoper() {
      this.openAddPeoper = false;
      this.resetAddPeoper();
    },
    // 表单重置
    reset3() {
      this.form = {
        deptIds: [],
        theType: 1,
        departmentId: undefined,
        workId: undefined,
        postId: undefined,
        personId: undefined,
      };
      this.resetForm("form3");
    },
    //班组人员弹框 保存
    preservation() {
      this.resetRelease();
      let _this = this;
      if (this.tableList2.length > 0) {
        let idArr = [],
          personnelArr = [];
        this.tableList2.forEach((item) => {
          idArr.push(item.theid);
          personnelArr.push(`${item.department} - ${item.fullName}`);
        });
        console.log(idArr);
        this.releaseParams.personnelIds = idArr.join(","); //消息接收人员名单id列表
        this.releaseParams.personnelNames = personnelArr.join(","); //消息接收人员名单（格式：部门-姓名）
        this.releaseParams.personnelNum = idArr.length; //发布人数
      }
      // 确定针对新增人员发布消息吗？
      // updateData(_this.releaseParams).then(() => {
      //   this.getList();
      //   this.msgSuccess("保存成功");
      //   setTimeout(() => {
      //     this.open2 = false;
      //   }, 1000);
      // });
      this.$confirm("是否确认保存?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
        type: "warning",
      })
        .then(function () {
          return updateData(_this.releaseParams);
        })
        .then(() => {
          // this.open2 = false
          this.getList();
          this.msgSuccess("保存成功");
        });
    },
    resetRelease() {
      this.releaseParams = {
        theid: this.currNoticeId, //id  在打开设置人员弹框时，赋值
        title: this.Teamnametitle, //班组名称
        theType: 1, //班组类别 1-内部员工 2-外委人员
        personnelIds: undefined, //人员名单id列表
        personnelNames: undefined, //人员名单（格式：部门-姓名）
        personnelNum: undefined, //班组人数
        departmentId: this.TeamdepartmentId, //培训部门 id
        department: this.Teamdepartment, //培训部门
        publisherId: this.userInfo.theid, //发布人id
        publisher: this.userInfo.thename, //发布人
      };
    },
    // 批量删除
    handleDelete2(row) {
      let _this = this;
      const theId = row.theid;
      if (row.theid) {
        //删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          _this.tableList2 = _this.tableList2.filter((item) => {
            return item.theid != theId;
          });
          _this.msgSuccess("删除成功");
        });
      } else {
        //批量删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          /* _this.tableList2 = _this.tableList2.filter(item => {
            return _this.ids.indexOf(item.theid) != -1
          }) */
          let newArr = [],
            flag = true;
          _this.tableList2.forEach((item) => {
            // 遍历每一个元素 判断当前元素，是否是要删除的元素
            // 把所有不需要删除的元素找到
            flag = _this.ids.some((id) => {
              return item.theid === id; //只要一个为turn,就会返回true 为true，说明是要删除的元素 为false，说明要保留的元素
            });
            if (flag === false) {
              newArr.push(item);
            }
          });
          _this.tableList2 = newArr;
          _this.msgSuccess("删除成功");
        });
      }
    },
    //   查看（点击人数）
    handleSee(row) {
      console.log(row);
      const theId = row.theid;
      this.currNoticeId = theId;
      this.Teamnametitle = row.title;
      this.TeamdepartmentId = row.departmentId;
      this.Teamdepartment = row.department;
      console.log(11111, this.currNoticeId);
      this.queryParamsPer.theid = theId;
      // 获取人员列表数据
      if (row.personnelNum) {
        //如果当前消息 有发布人数
        this.getListPer(); // 获取接受“当前消息”对应的“人员名单”
      } else {
        this.tableList2 = [];
      }
      this.open2 = true;
    },
    // 获取“当前班组”对应的“人员名单”
    getListPer() {
      getPersonnelList(this.queryParamsPer).then((response) => {
        console.log(response);
        if (response.code === 200) {
          this.tableList2 = response.result.rows;
          this.total2 = response.result.total;
        }
      });
    },
    handleQuery2() {
      this.queryParams2.pageNum = 1;
      this.getList2();
    },
    /** 重置按钮操作 */
    resetQuery2() {
      this.resetForm("queryForm2");
      this.handleQuery2();
    },
    getList2() {
      this.loading2 = true;
      // 调接口
      getPersonnelList(this.Personnetheid).then((response) => {
        // console.log("response", response);
        this.tableList2 = response.result;
        this.total2 = this.total;
        this.loading2 = false;
      });

      /* listAdmin(this.queryParams).then(
        response => {
          this.tableList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      ); */
    },
    /* deptIdChange(val) {
      this.$nextTick(() => {
        this.$refs.form.validateField('deptId');
      })
    }, */
    /** 导入 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      /* importTemplate().then(response => {
        this.download(response.msg);
      }); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出按钮操作 */
    handleExport() {
      // const queryParams = this.queryParams;
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口导出表
          // return exportRole(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.theid);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style scoped lang="scss">
// /deep/

.el-table .active {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
/* /deep/ .el-dialog:not(.is-fullscreen){
	min-height: 420px;
} */
.add-person /deep/ .el-dialog__body {
  padding: 0 20px 30px;
  min-height: 520px;
}
.tabs {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  li {
    padding: 4px 10px;
    color: #409eff;
    margin-right: 20px;
    cursor: pointer;
  }
  li.active {
    background: #409eff;
    color: #fff;
  }
}
.vue-treeselect__input {
  display: block;
}
.add-person /deep/ .el-select {
  display: block;
}

.add-person /deep/ .el-tabs__content {
  overflow: unset;
}
.vue-treeselect__multi-value-item {
  font-size: 16px;
}
/deep/ .vue-treeselect--open-below .vue-treeselect__menu {
  // max-height: none !important;
  max-height: 450px !important;
}
/deep/ .el-dialog:not(.is-fullscreen) {
  max-height: none;
}

// 去掉*号
/deep/ .el-form-item__label:before {
  content: "" !important;
}
</style>
